{% extends 'user/base.html' %}
{#标题继承#}
{% block title %}
<title>哈哈哈哈哈</title>
{% endblock %}

{#css继承#}
{% block extendcss %}
<!-- index.css样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='front/css/index.css') }}">
<!-- swiper轮播图 CSS -->
    <link rel="stylesheet" href="{{ url_for('static',filename ='vendor/swiper-10.3.1/swiper/swiper-bundle.min.css') }}">
<!-- navbar透明 -->
    <style>
        .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.7) !important; /* 半透明背景 */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 10;
        backdrop-filter: saturate(180%) blur(20px);
        border-bottom: #faf7f7 1px solid;
        }
        /* 小型设备 */
        @media (max-width: 576px) {
          .swiper {
            margin-top: 50px;
            height: 100px; /* 或根据需要调整 */
          }
        }

        /* 中型设备 */
        @media (min-width: 576px) and (max-width: 992px) {
          .swiper {
            margin-top: 75px;
            height: 150px; /* 或根据需要调整 */
          }
        }

        /* 大型设备 */
        @media (min-width: 992px) {
          .swiper {
            margin-top: 100px;
            height: 520px; /* 默认样式 */
          }
        }

    </style>
{% endblock %}

<!-- Main content 主要内容---->
{% block content %}
<!-- Main content 主要内容---->
<!--{#   巨幕滑动#}-->
    <section class="pt-lg-2 pb-sm-6" data-aos="zoom-out" id="example-carousel">
       <div class="jumbotron-fluid">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide carousel-inner shadow-sm rounded">
                    <img class="d-block w-100 h-75" src="{{'static/front/images/23_birthday_pc.jpg'}}" alt="First slide">
                    <div class="carousel-caption d-none d-md-block ml-4">
                        <h5>每一片花瓣都散发着浪漫的气息，每一句花语都是我对你的深情告白，愿我们的爱永远绚烂如初</h5>
                    </div>
                </div>
                <div class="swiper-slide carousel-inner shadow-sm rounded">
                    <img class="d-block w-100 h-75" src="static/front/images/flower_bannerFriend.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block ml-4">
                        <h5>携一束漂亮的花去赴老友的约，时间地点无所谓路远一点也没关系反正 天气这么好我们 好久不见。</h5>
                    </div>
                </div>
                <div class="swiper-slide carousel-inner shadow-sm rounded">
                    <img class="d-block w-100 h-75" src="static/front/images/flower_bannerParent.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block ml-4">
                        <h5>在细碎的美好中感受世间的温柔浪漫</h5>
                    </div>
                </div>
            </div>
                     <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev "></div>
            <div class="swiper-button-next " ></div>
        </div>
    </div>
    </section>
<!--{#滑轮卡片区域#}-->
    <section class="slice slice-lg pt-6 pb-sm-3 border-top" data-aos-delay="100" data-aos="zoom-out" id="flowercate">
        <div class="container-fluid">
            <!-- Title -->
            <!-- Section title -->
            <div class="row mb-2 justify-content-center text-center">
                <div class="col-lg-6">
                    <span class="badge badge-soft-success badge-pill badge-lg">
                        Get started
                    </span>
                    <h2 class=" mt-4 badge-soft-success">鲜花分类</h2>
                    <div class="mt-2">
                        <p class="lead lh-180">Use Atomic Design to build components, sections and, then, pages.</p>
                    </div>
                </div>
            </div>
            <!-- Card -->
            {% if cates %}
                <div class="row justify-content-center scale" style="position: relative">
                <div class="card-container zindex-100" style="overflow: hidden; white-space: nowrap;">
                     {% for cate in cates %}
                        <a class="card1" href="{{ url_for('flower.product', cate_id=cate.id) }}">
                            <div class="card" style="display: inline-block; width: 300px; margin-right: 10px;">
                                <div class="card-body pb-5" style="height: 510px !important;">
                                    <div class="pt-4 pb-5">
                                        <img src="{{ cate.CateImg }}" class="img-fluid img-center" style="height: 150px;" alt="Illustration" />
                                    </div>
                                    <h5 class="h4 lh-130 mb-3">{{ cate.name }}</h5>
                                    <p class="text-muted text-center text-left mb-0">{{ cate.description }}</p>
                                </div>
                            </div>
                        </a>
                    {% endfor %}
                </div>
                <div class="nextBtn" style="position: absolute; top: 50%; transform: translateY(-50%);">
                    <span class="btn btn-light" id="prevBtn">&laquo;</span>
                    <span class="btn btn-light" id="nextBtn">&raquo;</span>
                </div>
            </div>
            {% else %}
                <div class="row justify-content-center">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-center">暂无分类</h5>
                                {% if not user %}
                                    <p class="text-center">请<a href="/login">登录</a>后查看分类信息···</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </section>
<!--二级分类-产品详情-->
    <section class="slice slice-lg pb-6 border-top" data-aos-delay="100" data-aos-duration="400" data-aos="fade-up">
    <!-- Title -->
        <!-- 分类标题 -->
        <div class="row mb-5 justify-content-center text-center">
                <div class="col-lg-6">
                    <span class="badge badge-soft-info badge-pill badge-lg">
                        Get started
                    </span>
                    <h2 class=" mt-4 badge-soft-info">二级分类-产品详情</h2>
                    <div class="mt-2">
                        <p class="lead lh-180">Use Atomic Design to build components, sections and, then, pages.</p>
                    </div>
                </div>
            </div>
        <!-- 分类内容 -->
        {% if cates %}
        	<div class="container position-relative scale" >
            <div class="row">
                {% for flower in flowers %}
                	<div class="col-xl-4 col-md-12 col-sm-12">
                        <div class="card flw_info">
                            <div class="d-flex p-4 ">
                                <div class="col-md-4">
                                    {% if flower.category.id == 1 %}
                                        <span class="badge badge-danger badge-pill" style=" margin-left: 8px">爱情鲜花</span>
                                    {% elif flower.category.id == 3 %}
                                        <span class="badge badge-success badge-pill" style=" margin-left: 8px">友情鲜花</span>
                                    {% else %}
                                        <span class="badge badge-soft-info badge-pill" style=" margin-left: 8px">长辈鲜花</span>
                                    {% endif %}
                                        <a href="{{ url_for('flower.flower', flower_id=flower.id) }}">
                                            <img src="{{ flower.flowerImg }}" class="img-fluid img-center" style="height: 87px; width: 220px;" alt="Illustration" />
                                        </a>
                                </div>
                                <div class="col-md-9 ml-1">
                                    <a href="{{ url_for('flower.flower', flower_id=flower.id) }}">
                                        <h5 class="lh-130">{{ flower.name }}</h5>
                                    </a>
                                    <p class="text-muted w-75 mb-0">
                                        {{ flower.description }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
        {% else %}
        	<div class="row justify-content-center">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="text-center">暂无产品详情</h5>
                                {% if not user %}
                                    <p class="text-center">请<a href="/login">登录</a>后查看分类信息···</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
        {% endif %}
    </section>
<!--遇见花文-->
    <section class="position-relative pb-0 border-top "  data-aos="zoom-in">
        <div class="container scale">
<!--{#        遇见花文-标题#}-->
            <div class="row pl-2">
                <div class="col-lg-6 col-md-12 col-sm-12 justify-content-center">
                    <h2 class="col-lg-6 mt-2 badge-soft-success text-center" id='meeting'>遇见花文</h2>
                    <div class="col-lg-12 mt-2">
                        <p class="lead lh-180">生日送什么花好？解锁生日花束的秘密！</p>
                    </div>
                </div>
            </div>
            <!-- 遇见花文-内容 -->
            <div class="row mx-lg-n4 ">
                <!-- Features - Col 1 -->
                {% for i in articates %}
                <div class="col-lg-4 col-md-6 px-lg-4 ">
<!--分类标题-->
                    <div class="my-3">
                        {% if i.id == 1 or i.id ==4 %}
                            <button type="button" class="btn btn-block btn-success btn-round">{{ i.name }}</button>
                        {% elif i.id == 5 or i.id ==2 %}
                            <button type="button" class="btn btn-block btn-info btn-round">{{ i.name }}</button>
                        {% else %}
                            <button type="button" class="btn btn-block btn-danger btn-round">{{ i.name }}</button>
                        {% endif %}
                    </div>
<!--分类文章-->
                    <div class="card shadow-none" style="height: 230px;">
                        <div class="p-3 d-flex">
                            <div>
                                {% for article in i.articles %}
                                <p class="text-sm text-muted mb-0">
                                    <a class="nav-link-text text-left" href="{{ url_for('story.article', art_id=article.id)}}">{{ article.title }}</a>
                                </p>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
<!--品牌理念-->
    <section class="slice pt-0 scale bg-section-primary aos-animate" data-aos-duration="600" data-aos="fade-left">
        <div class="container">
            <div class="py-sm-6">
                <div class="row row-grid justify-content-between align-items-center scale">
                    <div class="col-lg-5 pl-2 pr-0 order-lg-2">
                        <a href="/idea">
                            <h5 class="h3">品牌理念</h5>
                        </a>
                        <p class="lead my-4">
                            喜欢一个人，大概就是，喜欢她身上的味道，喜欢她的每一个表情，想要跟她在一起度过每分每秒，想要牵着她的手直到时间的尽头。
                            送一束花吧，告诉她，无论我在哪里，我都会用力守护我们的爱情。
                        </p>
                        <ul class="list-unstyled mb-0">
                            <li class="py-2">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <div class="icon icon-shape bg-primary text-white icon-sm rounded-circle mr-3">
                                            <i class="fas fa-file-invoice"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <span class="mb-0">爱，才刚刚开始……</span>
                                    </div>
                                </div>
                            </li>
                            <li class="py-2">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <div class="icon icon-shape bg-primary text-white icon-sm rounded-circle mr-3">
                                            <i class="fas fa-store-alt"></i>
                                        </div>
                                    </div>
                                    <div>
                                        <span class="mb-0">幸福，才刚刚开始……</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-6 order-lg-1 ">
                        <div class="card mb-0 mr-lg-5">
                            <div class="card-body p-2">
                                <a href="/idea" class="">
                                <img alt="Image placeholder" src="{{ url_for('static',filename='front/images/home/idea-left.svg') }}" class="img-fluid shadow rounded">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!--联系我们-->
    <section class="slice slice-lg pt-4  pb-4" data-aos="fade-up">
        <div class="container text-center">
            <div class="row justify-content-center mb-6">
                <div class="col-lg-8">
                    <!-- Title -->
                    <h2 class="h1 strong-600">
                        未来无期，花开遇见
                    </h2>
                    <!-- Text -->
                    <p class="text-muted">
                        The beginning of the story is when you remember my name.
                    </p>
                </div>
            </div>

        </div>
    </section>
{% endblock %}

<!-- 扩展js---->
{% block extendjs %}
<!-- swiper轮播图js -->
    <script src="{{ url_for('static',filename='vendor/swiper-10.3.1/swiper/swiper-bundle.min.js') }}"></script>

    <script>
    // 轮播图js
    const mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        speed: 2000,
        autoplay: {
            delay: 8000
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });
    // 滑轮播卡片
        let prevBtn = document.getElementById('prevBtn');
            if (prevBtn) {
                prevBtn.addEventListener('click', function () {
                    const container = document.querySelector('.card-container');
                    container.scrollLeft -= 440; // 减去一个卡片的宽度加上间隙
                    if (container.scrollLeft <= 0) {
                        container.scrollLeft = 0; // 防止滚动到容器左边界之外
                    }
                })
            }
        let nextBtn = document.getElementById('nextBtn')
            if(nextBtn){
                nextBtn.addEventListener('click',function (){
                    const con= document.querySelector('.card-container');
                    const max = con.scrollWidth - con.clientWidth;
                    con.scrollLeft +=440;
                    if(con.scrollLeft > max) {
                        con.scrollLeft = max;
                    }
                })
            }

    </script>
{% endblock %}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const container = document.querySelector('.card-container');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');

        prevBtn.addEventListener('click', function() {
            container.scrollLeft -= 320; // 向左滚动
        });

        nextBtn.addEventListener('click', function() {
            container.scrollLeft += 320; // 向右滚动
        });
    });
</script>

<style>
    @media (max-width: 576px) {
        .card-container {
            display: flex;
            overflow-x: auto;
        }
        .card {
            width: 80%; /* 在小屏幕上卡片宽度 */
            margin-right: 10px;
        }
    }

    @media (min-width: 577px) and (max-width: 768px) {
        .card {
            width: 45%; /* 在中等屏幕上卡片宽度 */
        }
    }

    @media (min-width: 769px) {
        .card {
            width: 30%; /* 在大屏幕上卡片宽度 */
        }
    }

    .nextBtn {
        display: flex;
        justify-content: space-between;
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }
</style>

